<template>
    <div class="user-dropdown" v-click-outside="closeDropdown">
      <button class="user-button" @click="toggleDropdown">
        <img v-if="user.avatar" :src="user.avatar" alt="User Avatar" class="user-avatar" />
        <div v-else class="avatar-placeholder">
          {{ user.username.charAt(0).toUpperCase() }}
        </div>
        <span class="username">{{ user.username }}</span>
        <i class="icon-chevron-down" :class="{ 'rotate-180': isOpen }"></i>
      </button>
      
      <div v-if="isOpen" class="dropdown-menu">
        <router-link to="/profile" class="dropdown-item">
          <i class="icon-user"></i> 个人中心
        </router-link>
        <router-link to="/settings" class="dropdown-item">
          <i class="icon-settings"></i> 修改密码
        </router-link>
        <div class="dropdown-divider"></div>
        <button class="dropdown-item logout" @click="logout">
          <i class="icon-logout"></i> 退出登录
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useUserStore } from '@/stores/user';
  import { useRouter } from 'vue-router';
  
  const userStore = useUserStore();
  const router = useRouter();
  const isOpen = ref(false);
  
  const user = computed(() => userStore.user);
  
  const toggleDropdown = () => {
    isOpen.value = !isOpen.value;
  };
  
  const closeDropdown = () => {
    isOpen.value = false;
  };
  
  const logout = async () => {
    await userStore.logout();
    router.push('/');
    closeDropdown();
  };
  
  // 点击外部关闭下拉菜单的指令
  const vClickOutside = {
    beforeMount(el, binding) {
      el.clickOutsideEvent = function(event) {
        if (!(el === event.target || el.contains(event.target))) {
          binding.value();
        }
      };
      document.addEventListener('click', el.clickOutsideEvent);
    },
    unmounted(el) {
      document.removeEventListener('click', el.clickOutsideEvent);
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .user-dropdown {
    position: relative;
  }
  
  .user-button {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 20px;
    transition: all 0.3s ease;
    color: var(--text-primary);
    
    &:hover {
      background: rgba(var(--surface-rgb), 0.2);
    }
  }
  
  .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
  }
  
  .avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    background: $primary;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
  }
  
  .username {
    margin-right: 8px;
    font-size: 0.9rem;
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .icon-chevron-down {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
  }
  
  .rotate-180 {
    transform: rotate(180deg);
  }
  
  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 8px 0;
    margin-top: 8px;
    z-index: 1000;
    border: 1px solid rgba(var(--border-color-rgb), 0.1);
    animation: fadeIn 0.2s ease;
  }
  
  .dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    
    &:hover {
      background: rgba($primary, 0.1);
      color: $primary;
    }
    
    i {
      margin-right: 10px;
      font-size: 1rem;
    }
  }
  
  .dropdown-divider {
    height: 1px;
    background: rgba(var(--border-color-rgb), 0.1);
    margin: 8px 0;
  }
  
  .logout {
    color: var(--danger);
    
    &:hover {
      background: rgba(var(--danger-rgb), 0.1);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @media (max-width: 768px) {
    .username {
      display: none;
    }
    
    .dropdown-menu {
      right: -10px;
    }
  }
  </style>